<template>
	<view>
		<navBar backJudge title="搜索"></navBar>
		<view class="searchBox">
			<view class="search">
				<uni-icons @click="search()" class="icon" type="search"></uni-icons>
				<input  v-model="searchValue" :placeholder="placeholder" class="input" />
			</view>
		</view>
		<view v-if="searchList">
			<view class="list">
				<view class="item" @click="toDetail(item.id)" v-for="(item,index) in searchList" :key="index">{{item.storeName}}</view>
			</view>
		</view>
		<view v-if="!searchList" class="title">热门搜索</view>
		<view v-if="!searchList" class="tagsBox">
			<view class="tag" v-for="(item,index) in tags" :key="index">{{item}}</view>
		</view>
	</view>
</template>

<script>
	import {searchClass} from '@/utils/API.js';
	import navBar from '../../components/navbars/navbars.vue'
	export default {
		data() {
			return {
				tags: ['宜家家具组装', '安装床', '安装柜', '深度清洁', '日常保洁', '空调清洗'],
				searchValue: '',
				placeholder:'',
				timeOut: '',
				searchList: [],
				id:''
			}
		},
		components:{
			navBar
		},
		watch: {
			searchValue: {
				handler(val) {
					this.search()
				}
			}
		},
		onLoad(e) {
			this.placeholder = e.value
			this.id = e.id
			this.search()
		},
		methods: {
			toDetail(id){
				uni.navigateTo({
					url:'/pages-detail/shop-detail/shop-detail?id='+id
				})
			},
			async searchs(data){
				const res = await searchClass(data)
				if(res.code==200){
					this.searchList = res.data
				}
			},
			 search() {
				if(this.searchValue!=''){
					var data = {
						itemName: this.searchValue
					}
				}else{
					var data = {
						itemName: this.placeholder
					}
				}
				
				clearTimeout(this.timeOut)
				this.timeOut = setTimeout(() => {
					this.searchs()
				}, 500)
			}
		},
		
	}
</script>

<style scoped lang="scss">
	page {
		background-color: white;
	}

	.list{
		padding: 0px 20px;
		.item{
			border-bottom: 1px solid $shollowGrey;
			padding: 10px 0px;
		}
	}

	.tagsBox {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding: 10px 20px;
		padding-right: 10px;

		.tag {
			padding: 5px 12px;
			border-radius: 5px;
			background-color: #F4F4F4;
			color: black;
			font-size: 15px;
			margin-right: 10px;
			margin-bottom: 10px;
		}
	}

	.title {
		padding: 10px 20px;
		color: $grey;
	}

	.searchBox {
		position: relative;
		z-index: +10;
		padding: 10px 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.search {
			display: flex;
			align-items: center;
			padding: 8px 10px;
			border-radius: 0px;
			background-color: rgba(232, 232, 232, 0.40);
			border-radius: 20px;
			width: 100%;
			border: 2px solid $blue;

			.icon {
				margin-right: 10px;
			}
		}

		.rightBox {
			background: $linerBlue;
			padding: 9px;
			border-radius: 9px;

			.iconBox {
				width: 16px;
				height: 16px;
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					color: white !important;
					font-size: 16px !important;
					font-weight: bold;
				}
			}
		}
	}
</style>